<template>
  <div class="play-bottom">
    <div class="left" @click="showPlayer" v-if="Object.keys(song).length!=0">
      <img class="rotate" :class="playing?'play':'paused'"
        alt="" :src="song.al.picUrl"
      />
      <div class="msg">
        <div class="music-name">{{song.title}}</div>
        <div class="name">{{song.ar.slice(0,2).join('/')}}</div>
      </div>
    </div>
    <div class="right">
      <div @click="playClick">
        <div class="c-progress">
          <circle-progress />
        </div>
        <i
          class="iconfont"
          :class="playing ? 'icon-stop' : 'icon-zanting1'"
        ></i>
      </div>
      <span class="iconfont icon-liebiao" @click="PopupClick"></span>
    </div>
    <!-- 底部歌词 -->
    <div class="word" v-if="lyrics.length!=0">
      <div class="w">{{lyrics[currentLyric].word}}</div>
      </div>
    <!-- 播放列表弹出层 -->
    <transition enter-active-class="popupSlideIn" leave-active-class="popupSlideOut">
      <songlist-popup v-model="SongPopup" v-show="SongPopup"/>
    </transition>
    <!-- 遮罩层 -->
    <transition enter-active-class="popup-fade-in" leave-active-class="popup-fade-out">
      <div class="xy-shadow" v-show="SongPopup"></div>
    </transition>
  </div>
</template>

<script>
import { mapState,mapGetters} from "vuex";
import CircleProgress from "./circle-progress";
import SonglistPopup from './songlist-popup.vue';
export default {
  data() {
    return {
      SongPopup:false,
    };
  },
  components: { CircleProgress,SonglistPopup },
  computed: {
    ...mapState({
      playing: (state) => state.player.playing,
      lyrics:state=>state.player.lyrics,
      playSongList:state=>state.player.playSongList
    }),
    ...mapGetters({
      song:'player/currentSong',
      currentLyric:'player/currentLyric'
    })
  },
  methods: {
    showPlayer() {
      this.$emit("showPlayer");
    },
    playClick() {
      this.$store.commit("player/setPlaying", !this.playing);
    },
    PopupClick(){
      this.SongPopup=true
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/global-style.scss";
.play-bottom {
  z-index: 10001;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  .left {
    display: flex;
    align-items: center;
    .msg {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin-left: 14px;
      .music-name {
        font-size: 16px;
      }
      .name {
        font-size: 14px;
        color: $font-color-desc-v2;
        width:250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
    }
  }
  .right {
    display: flex;
    align-items: center;
    position: relative;
    .c-progress {
      margin: 2px 15px 0 0;
    }
    i {
      position: absolute;
      top: 50%;
      left: 24%;
      transform: translate(-50%, -50%);
      color: $theme-color;
    }
    span {
      color: $theme-color;
      font-size: 28px;
    }
  }
}
// 设置歌词
.word{
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  .w{
    color: #1ecc94;
    background: #fff;
    z-index: 999;
  }
}
</style>
